<ui:composition template="/WEB-INF/templates/login-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="menu"></ui:define>
	<ui:define name="submenu"></ui:define>
	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>
	<ui:define name="content">	
		


		<h:form id="MiscExpensesForm">
			<p:growl />

			<h:panelGrid>
				<h:outputText value="Miscellaneous Expense Claim"
					styleClass="outputTextTitle" />
			     <p:panel header="Employee Details"> 
					<h:panelGrid columns="6" cellspacing="4"
						columnClasses="employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText, employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText">

						<h:outputLabel value="Expense Code" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{approveReimbursementBean.miscExpense.miscExpenseCode}" />


						<h:outputLabel value="#{msg['employeename.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{approveReimbursementBean.miscExpense.employee.firstName} #{approveReimbursementBean.miscExpense.employee.lastName}" />

						<h:outputLabel value="Employee Code" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{approveReimbursementBean.miscExpense.employee.employeeCode}" />

						<h:outputLabel value="#{msg['place.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{approveReimbursementBean.miscExpense.employee.location}" />

						<h:outputLabel value="#{msg['requestdate.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{approveReimbursementBean.miscExpense.requestDate}">
							<f:convertDateTime pattern="dd-MMM-yyyy HH:mm a" timeZone="#{approveReimbursementBean.timeZone}"/>
						</h:outputLabel>

						<h:outputLabel value="#{msg['dept.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{approveReimbursementBean.miscExpense.employee.moduleName}" />

						<h:outputLabel value="#{msg['designation.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{approveReimbursementBean.miscExpense.employee.designation}" />

					</h:panelGrid>

					<h:outputText value="Expense Details"
						styleClass="outputTextSubTitle" />
					<h:panelGrid columns="3" cellspacing="4"
						columnClasses="employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText, employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText">

						<h:outputLabel value="#{msg['purpose.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{approveReimbursementBean.miscExpense.expensePurpose}"
							readonly="true" />

						<h:outputLabel value="#{msg['location.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{approveReimbursementBean.miscExpense.expenseLocation}"
							readonly="true" />
					</h:panelGrid>

					<h:outputText value="#{msg['miscellaneousexpensessubtitle.label']}"
						styleClass="outputTextSubTitle" />
					<p:dataTable id="mixcexpensesdetails"
						value="#{approveReimbursementBean.miscExpensesDetails}"
						var="miscExpenseDetails">

						<p:column headerText="Date">
							<h:outputText value="#{miscExpenseDetails.billDate}">
								<f:convertDateTime pattern="dd-MMM-yyyy" timeZone="#{approveReimbursementBean.timeZone}"/>
							</h:outputText>
						</p:column>

						<p:column headerText="Purpose/Bill Description/Bill of">
							<h:outputText value="#{miscExpenseDetails.billDesc}" />
						</p:column>
						
						<p:column headerText="Bill No">
							<h:outputText value="#{miscExpenseDetails.billNo}" />
						</p:column>
						
						<p:column headerText="Amount">
							<h:outputText value="#{miscExpenseDetails.amount}" />
						</p:column>
						
						<p:column headerText="Currency">
							<h:outputText value="#{miscExpenseDetails.currency}" />
						</p:column>
						
						<p:column headerText="Bill Attached">
							<h:outputText value="#{miscExpenseDetails.billAttached}" />
						</p:column>
				
					</p:dataTable>
					
					<br />
					<h:outputText value="Expenses report summary total"
						styleClass="outputTextSubTitle" />
					<p:dataTable value="#{approveReimbursementBean.currencies}"
						var="currency" style="width:40%;">

						<p:column headerText="Amount">
							<h:outputText value="#{currency.amount}" style="float:right;"/>
						</p:column>
						<p:column headerText="Currency">
							<h:outputText value="#{currency.currency}" />
						</p:column>
					</p:dataTable>
					<br />
					<h:outputText value="Disbursement Summary"
						styleClass="outputTextSubTitle" />
					 <h:panelGrid columns="5" cellspacing="8" columnClasses="gridCellMiddleLeftAligned,employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText">
									
						<h:outputLabel value="" />
						<h:outputText value="Advance Taken" />
		                <h:outputText value=":"/>
	                	<p:inputText value="#{approveReimbursementBean.miscExpense.advanceTakenAmount}"
								readonly="true" />
					    <p:inputText value="#{approveReimbursementBean.miscExpense.advanceTakenCurrency}"
							readonly="true" />	                    
				        
				        <h:outputLabel value="" />
				        <h:outputText value="#{msg['approvaltotal.label']}" />
				        <h:outputText value=":"/>
						<p:inputText id="ApproverTotal" value="#{approveReimbursementBean.miscExpense.approvedAmount}">
								<p:ajax event="change"	listener="#{approveReimbursementBean.getBalancePay}" update="balancePay" />
						</p:inputText>						
						<p:selectOneMenu value="#{approveReimbursementBean.miscExpense.approvedCurrency}" style="width: 160px;">
				             <p:ajax event="change" listener="#{approveReimbursementBean.currencyChangeListener}" update="@form"/>
				             <f:selectItems value="#{approveReimbursementBean.currencyMap}"/> 
				        </p:selectOneMenu>
				        
				        <h:outputLabel value="" />
				        <h:outputText value="#{msg['balanceamountpayble/receivable.label']}" />
				        <h:outputText value=":"/>
						<p:inputText
								value="#{approveReimbursementBean.miscExpense.balancepayableAmount}"
								readonly="true" id="balancePay" />
						<p:inputText readonly="true" 
								value="#{approveReimbursementBean.miscExpense.balancePayableCurrency}" />
		               
		                
						
			 </h:panelGrid>
					

					<h:panelGrid style="width: 99%; padding: 4px;">
						<h:outputText value="Approver Comments:" />
						<p:inputTextarea
							value="#{approveReimbursementBean.miscExpense.approvalComment}"
							style="width: 100%; " /> 
					</h:panelGrid>

					<h:panelGrid >
						<h:outputLabel
							value="Status " styleClass="outputTextSubTitle" />
						<h:outputLabel
							value="#{approveReimbursementBean.miscExpense.expenseStatus}" styleClass="outputLabelwamInformation" />
					</h:panelGrid>
				</p:panel>
				<h:panelGrid style="float: right;" columns="2"
					rendered="#{approveReimbursementBean.miscExpense.expenseStatus eq 'IN PROCESS'}">
					<p:commandButton value="Approve"
						actionListener="#{approveReimbursementBean.confirmationAction}"
						update="@form" />
					<p:commandButton value="Reject"
						actionListener="#{approveReimbursementBean.confirmationRejectAction}"
						update="@form" />
				</h:panelGrid>

			</h:panelGrid>
			
			<p:confirmDialog widgetVar="confirmation" id="confirmation" severity="alert" message="Do you want to approve this misc. expense request. Proceed?">
				<h:panelGroup style="text-align: right; float: right;">
					<p:commandButton value="Yes, Approve Now" actionListener="#{approveReimbursementBean.approveMiscExpense}" update="@form" oncomplete="confirmation.hide()"/>
					<p:commandButton id="decline" value="Not Yet" onclick="confirmation.hide()" type="button" />
				</h:panelGroup>
		    </p:confirmDialog>
		    
		    <p:confirmDialog widgetVar="confirmationReject" id="confirmationReject" severity="alert" message="Do you want to reject this misc. expense request. Proceed?">
				<h:panelGroup style="text-align: right; float: right;">
					<p:commandButton value="Yes, Reject Now" actionListener="#{approveReimbursementBean.rejectMiscExpense}" update="@form" oncomplete="confirmationReject.hide()"/>
					<p:commandButton id="reject" value="Not Yet" onclick="confirmationReject.hide()" type="button" />
				</h:panelGroup>
		    </p:confirmDialog>


		</h:form>

	</ui:define>
</ui:composition>

